<script setup>
import { onMounted, ref, reactive, computed } from 'vue';

const count = ref(0)
const increment = () => {
    count.value++
}

function increment2 () {
    count.value++
}

onMounted(()=>{
    // console.log(`The initial count is ${count.value}.`)
})

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

const publishedBooksMessage = computed(()=> {
    return author.books.length > 0 ? 'Yes' : 'No'
})

const count3 = ref(0)
const alwaysSmall = computed((previous) => {
  if (count3.value <= 3) {
    return count3.value
  }
  return previous
})

</script>
<template>
    <h1>CompositionAPI</h1>
    <button @click="increment()">count:{{ count }}</button>
    <button @click="increment2()">count:{{ count }}</button>

    <p>Has published books: {{ author.books.length }}</p>
    <span>{{ publishedBooksMessage }}</span>

    <p>Count3.value : {{ count3 }}</p>
    <p>alwaysSmall.value : {{ alwaysSmall }}</p>
    <button @click="count3++">count3.value++</button>

    
</template>